import React, { Component } from 'react'
import ReactEcharts from 'echarts-for-react'
import './index.css'

const prefixCls = 'talent'
export default class index extends Component {
    constructor(props) {
        super(props)

        this.state = {
            result: null,
            commonVOs:[]
        }
    }
    componentDidMount() {

        // if (this.props.model && this.props.model.getParent().getCache("FilterViewModel")) {
        //     const filterViewModel = this.props.model.getParent().getCache("FilterViewModel");

            


        //     filterViewModel.on("filterClick", function (data) {


        //         this.setState({
        //             commonVOs: data.condition.commonVOs,
        //         }, () => {
        //             // console.log('222222', this.state.orgCode)
        //         })
        //     }, this)
        // }


        this.getData()
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevState.commonVOs !== this.state.commonVOs) {
            this.getData(this.state.commonVOs)
            this.setState({ resultData: null }, () => {
                // console.log('---------->', this.state.resultData)
            })
        }
    }

    getInteger = (value) => {
        if (value > 0) {
            value = Math.ceil(value)
            if (value % 5 === 0) return value
            for (let i = 1; i <= 5; i++) {
                if (++value % 5 === 0) break
            }
            return value
        } else if (value === 0) {
            return value
        } else {
            value = Math.floor(value)
            if (value % 5 === 0) return value
            for (let i = 1; i <= 5; i++) {
                if (--value % 5 === 0) break
            }

            return value
        }
    }

    getData = (par) => {



        // // 企业功能类型
        // let dataTypeObj = null
        // // 企业管理层级
        // let dataPeriodObj = null
        // // 组织机构
        // let dataOrgMain = null
        // // 人才类型
        // let dataOrgMain1 = null




        // if (par && par.length > 2) {
        //     // 企业功能类型
        //     dataTypeObj = par.find(item => {
        //         return item.itemName === 'dataType'
        //     })
        //     // 企业管理层级
        //     dataPeriodObj = par.find(item => {
        //         return item.itemName === 'dataPeriod'
        //     })
        //     // 组织机构
        //     dataOrgMain = par.find(item => {
        //         return item.itemName === 'orgMain'
        //     })
        //     // 人才类型
        //     dataOrgMain = par.find(item => {
        //         return item.itemName === 'orgMain'
        //     })
        // }

        // const proxy = this.props.model.setProxy({ ensure: { url: '/chartlrpage/wholeLrInfoGY', method: 'post' } })


        // const params = {
        //     enterpriseCategory: dataTypeObj ? dataTypeObj.value1 : '',
        //     manageLevel: dataPeriodObj ? dataPeriodObj.value1.substring(0, 4) : '',
        //     orgId: dataPeriodObj ? dataPeriodObj.value1.substring(5, 7) : '',
        //     leaderType: dataOrgMain ? dataOrgMain.value1 : '',
        // }

        // proxy.ensure(params, function (err, res) {

        //     this.setState(
        //         {

        //            result:res

        //         }, () => {
        //             console.log("请求数据", res, this.state.result)
        //         })


        // }, this)







        let obj = {

            //性别结构 

            "genderStr": {

                "1": "25", //男

                "2": "75", //女



            },

            //年龄结构

            "ageStr": {

                "1": "25", //20岁以下

                "2": "75", //20-25岁



            },

            //学历结构

            "educationalStr": {

                "1": "10", //博士

                "2": "33", //硕士



            },

            //职称结构

            "jobTitleStr": [

                {
                    "name": "初级", //

                    "value": "25", //

                },
                {
                    "name": "终极", //

                    "value": "25", //

                },
                {
                    "name": "高级", //

                    "value": "25", //

                },
                {
                    "name": "正高", //

                    "value": "25", //

                },
                {
                    "name": "正高1", //

                    "value": "25", //

                },

            ]

        }

        this.setState({ result: obj })
    }




    // 性别结构
    getOptionSex = () => {


        let { result } = this.state

        let genderStr = result && result.genderStr ? result.genderStr : {}

        let seriesdata = [
            {
                name: '男',
                value: genderStr['1'] ? genderStr['1'] : 0
            },
            {
                name: '女',
                value: genderStr['2'] ? genderStr['2'] : 0
            }
        ]



        let option = {
            color: ['#5f9ef8', '#72c9ca', '#1CD797', '#4D86F0', '#6BBBFF'],
            title: {
                text: '{a|}{b| 性别结构}',
                top: 11,
                left: 15,
                textStyle: {
                    rich: {
                        a: {
                            verticalAlign: 'middle',
                            height: 14,
                            width: 2,
                            backgroundColor: '#1673FF'
                        },
                        b:{
                            color: '#334974',
                            fontSize: 16,
                            fontWeight: 600,
                            lineHeight: 24,
                            fontFamily: 'PingFang SC',
                            fontStyle: 'normal',
                        }
                    }
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}:{d}%',
            },
            legend: {
                bottom: '5%',
                left: 'center',
                icon: 'circle',
                type: 'scroll',
                padding: [0, 20, 0, 20]
            },
            series: [
                {
                    // name: 'Access From',
                    type: 'pie',
                    radius: ['20%', '40%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        // borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    data: seriesdata,
                    minAngle: 15,
                    label: {
                        normal: {
                            formatter: '{b}:{d}%',
                            textStyle: {
                                color: '#666',
                                fontSize: 12,
                                fontFamily: 'PingFang SC',
                                fontStyle: "normal",
                                fontWeight: '400'

                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true,
                            length: 15,
                        }
                    },
                }
            ]
        };














        return option
    }



    // 年龄结构
    getAgeOption = () => {
        let { result } = this.state
        let ageStr = result && result.ageStr ? result.ageStr : {}


        let mapObj = {
            '1': '20岁以下',
            '2': '20到25岁',
            '3': '25到30岁',
            '4': '30到35岁',
            '5': '35到40岁',
            '6': '40到45岁',
            '7': '45到50岁',
            '8': '50到55岁',
            '9': '55到60岁',
            '10': '60岁以上',
        }

        let xdata = []
        let ydata = []

        for (const key in ageStr) {
            if (Object.hasOwnProperty.call(ageStr, key)) {
                xdata.push(mapObj[key])
                ydata.push(ageStr[key])

            }
        }

        let max1 = Math.max(...ydata)








        let option = {
            title: {
                text: '{a|}{b| 年龄结构}',
                top: 11,
                left: 15,
                textStyle: {

                    rich: {
                        a: {
                            verticalAlign: 'middle',
                            height: 14,
                            width: 2,
                            backgroundColor: '#1673FF'
                        },
                        b: {
                            color: '#334974',
                            fontSize: 16,
                            fontWeight: 600,
                            lineHeight: 24,
                            fontFamily: 'PingFang SC',
                            fontStyle: 'normal',
                        }
                    }
                }
            },
            color: ['#4D86F0', '#1CD797', '#FFDE45', '#EC633E'],
            tooltip: {
                trigger: "axis",
                textStyle: {
                    color: "#666",
                    fontFamily: 'PingFang SC'
                },
                // formatter: function (params) {
                //     return params[0].name + '<br>' + data2_danwei[params[0].dataIndex] + danWei(data2[params[0].dataIndex], 0)
                // }
            },
            legend: [{
                // data: [
                //     { name: '销售收入', icon: 'square' },
                //     { name: '销售成本', icon: 'square' },
                //     { name: '销量', icon: '' }],
                icon: ['square', 'square', 'circle'],
                itemHeight: 8,
                itemWidth: 8,
                left: 'center',
                bottom: '4%',
                textStyle: {
                    color: "#666",
                    fontSize: 12,
                    fontFamily: 'PingFang SC',
                    fontWeight: 400,
                    lineHeight: 12,
                },
                show: false

            }],
            grid: {
                top: 64,
                left: 24,
                right: '5%',
                bottom: 20,

                containLabel: true,
            },
            xAxis: [
                {
                    type: 'category',
                    data: xdata,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        margin: 0,
                        fontFamily: 'PingFang SC',
                        fontStyle: 'normal',
                        fontWeight: 400,
                        fontSize: 12,
                        lineHeight: 20,
                        color: '#666',
                        interval: 0,
                        formatter: function (value) {
                            return value
                        }
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    max: this.getInteger(max1),
                    min: 0,
                    interval: (this.getInteger(max1) - 0) / 5,
                    splitNumber: 5,
                    nameTextStyle: {
                        fontFamily: 'PingFang SC',
                        fontStyle: 'normal',
                        fontWeight: 400,
                        fontSize: 22,
                        lineHeight: 26,
                        color: '#666',
                        padding: [0, 0, 0, 100]
                    },
                    axisTick: {
                        show: true,
                        length: 15,
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.6)',

                        }
                    },
                    axisLabel: {
                        margin: 10,
                        fontFamily: 'Helvetica Neue',
                        fontStyle: 'normal',
                        fontWeight: 400,
                        fontSize: 12,
                        lineHeight: 14,
                        color: '#666',
                        // formatter: function (value) {
                        //     // return value
                        //     return value * value * value
                        // }

                    },
                    splitLine: {
                        lineStyle: {
                            color: '#DBE0E5',
                            width: 1,
                            type: 'dashed'
                        }
                    },

                }
            ],
            series: [
                {
                    name: '销售收入',
                    type: 'bar',
                    stack: '',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value;
                        }
                    },
                    data: ydata,
                    // barGap: '60%',
                    barWidth: 30,
                    // barMinHeight: 20,
                    yAxisIndex: 0
                }
            ]
        };









        return option
    }


    // 学历结构
    getStudyOption = () => {
        let { result } = this.state
        let educationalStr = result && result.educationalStr ? result.educationalStr : {}


        let mapObj = {
            '1': '高中及以下',
            '2': '中专',
            '3': '大学专科',
            '4': '大学本科',
            '5': '硕士研究生',
            '6': '博士研究生'
        }

        let xdata = []
        let ydata = []

        for (const key in educationalStr) {
            if (Object.hasOwnProperty.call(educationalStr, key)) {
                xdata.push(mapObj[key])
                ydata.push(educationalStr[key])

            }
        }



        let max1 = Math.max(...ydata)










        let option = {
            title: {
                text: '{a|}{b| 学历结构}',
                top: 11,
                left: 15,
                textStyle: {
                    rich: {
                        a: {
                            verticalAlign: 'middle',
                            height: 14,
                            width: 2,
                            backgroundColor: '#1673FF'
                        },
                        b: {
                            color: '#334974',
                            fontSize: 16,
                            fontWeight: 600,
                            lineHeight: 24,
                            fontFamily: 'PingFang SC',
                            fontStyle: 'normal',
                        }
                    }
                }
            },
            color: ['#4D86F0', '#1CD797', '#FFDE45', '#EC633E'],
            tooltip: {
                trigger: "axis",
                textStyle: {
                    color: "#666",
                    fontFamily: 'PingFang SC'
                },
                // formatter: function (params) {
                //     return params[0].name + '<br>' + data2_danwei[params[0].dataIndex] + danWei(data2[params[0].dataIndex], 0)
                // }
            },
            legend: [{
                // data: [
                //     { name: '销售收入', icon: 'square' },
                //     { name: '销售成本', icon: 'square' },
                //     { name: '销量', icon: '' }],
                icon: ['square', 'square', 'circle'],
                itemHeight: 8,
                itemWidth: 8,
                left: 'center',
                bottom: '4%',
                textStyle: {
                    color: "#666",
                    fontSize: 12,
                    fontFamily: 'PingFang SC',
                    fontWeight: 400,
                    lineHeight: 12,
                },
                show: false

            }],
            grid: {
                top: 64,
                left: 24,
                right: '5%',
                bottom: 20,

                containLabel: true,
            },
            xAxis: [
                {
                    type: 'category',
                    data: xdata,
                    axisPointer: {
                        type: 'shadow'
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        margin: 0,
                        fontFamily: 'PingFang SC',
                        fontStyle: 'normal',
                        fontWeight: 400,
                        fontSize: 12,
                        lineHeight: 20,
                        color: '#666',
                        interval: 0,
                        formatter: function (value) {
                            return value
                        }
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    max: this.getInteger(max1),
                    min: 0,
                    interval: (this.getInteger(max1) - 0) / 5,
                    splitNumber: 5,
                    nameTextStyle: {
                        fontFamily: 'PingFang SC',
                        fontStyle: 'normal',
                        fontWeight: 400,
                        fontSize: 22,
                        lineHeight: 26,
                        color: '#666',
                        padding: [0, 0, 0, 100]
                    },
                    axisTick: {
                        show: true,
                        length: 15,
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.6)',

                        }
                    },
                    axisLabel: {
                        margin: 10,
                        fontFamily: 'Helvetica Neue',
                        fontStyle: 'normal',
                        fontWeight: 400,
                        fontSize: 12,
                        lineHeight: 14,
                        color: '#666',
                        // formatter: function (value) {
                        //     // return value
                        //     return value * value * value
                        // }

                    },
                    splitLine: {
                        lineStyle: {
                            color: '#DBE0E5',
                            width: 1,
                            type: 'dashed'
                        }
                    },

                }
            ],
            series: [
                {
                    name: '销售收入',
                    type: 'bar',
                    stack: '',
                    tooltip: {
                        valueFormatter: function (value) {
                            return value;
                        }
                    },
                    data: ydata,
                    // barGap: '60%',
                    barWidth: 30,
                    // barMinHeight: 20,
                    yAxisIndex: 0
                }
            ]
        };









        return option
    }


    // 职称结构
    getOptionZCJG = () => {


        let { result } = this.state

        let jobTitleStr = result && result.jobTitleStr ? result.jobTitleStr : []


        let seriesdata = jobTitleStr ? jobTitleStr : []





        let option = {
            color: ['#5f9ef8', '#72c9ca', '#78c97d', '#f5d564', '#A57FF3'],
            title: {
                text: '{a|}{b| 职称结构}',
                top: 11,
                left: 15,
                textStyle: {
                    rich: {
                        a: {
                            verticalAlign: 'middle',
                            height: 14,
                            width: 2,
                            backgroundColor: '#1673FF'
                        },
                        b: {
                            color: '#334974',
                            fontSize: 16,
                            fontWeight: 600,
                            lineHeight: 24,
                            fontFamily: 'PingFang SC',
                            fontStyle: 'normal',
                        }
                    }
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}:{d}%',
            },
            legend: {
                bottom: '5%',
                left: 'center',
                icon: 'circle',
                type: 'scroll',
                padding: [0, 20, 0, 20]
            },
            series: [
                {
                    // name: 'Access From',
                    type: 'pie',
                    radius: ['20%', '40%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        // borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    data: seriesdata,
                    minAngle: 15,
                    label: {
                        normal: {
                            formatter: '{b}:{d}%',
                            textStyle: {
                                color: '#666',
                                fontSize: 12,
                                fontFamily: 'PingFang SC',
                                fontStyle: "normal",
                                fontWeight: '400'

                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true,
                            length: 15,
                        }
                    },
                }
            ]
        };














        return option
    }


    render() {
        return (
            <div className={prefixCls}>


                <div className={`${prefixCls}-line1`}>
                    <div className={`${prefixCls}-line1-left`}>
                        <ReactEcharts
                            style={{ width: '100%', height: '100%' }}
                            option={this.getOptionSex('')}
                            notMerge={true}
                            lazyUpdate={true}
                        >
                        </ReactEcharts>
                    </div>
                    <div className={`${prefixCls}-line1-right`}>
                        <ReactEcharts
                            style={{ width: '100%', height: '100%' }}
                            option={this.getAgeOption('')}
                            notMerge={true}
                            lazyUpdate={true}
                        >
                        </ReactEcharts>
                    </div>

                </div>
                <div className={`${prefixCls}-line2`}>
                    <div className={`${prefixCls}-line2-left`}>
                        <ReactEcharts
                            style={{ width: '100%', height: '100%' }}
                            option={this.getStudyOption('')}
                            notMerge={true}
                            lazyUpdate={true}
                        >
                        </ReactEcharts>
                    </div>
                    <div className={`${prefixCls}-line2-right`}>
                        <ReactEcharts
                            style={{ width: '100%', height: '100%' }}
                            option={this.getOptionZCJG('')}
                            notMerge={true}
                            lazyUpdate={true}
                        >
                        </ReactEcharts>
                    </div>
                </div>





            </div >
        )
    }
}
